<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		color:{
            type:Array,
            default:['#33d3ff','#00a2ff']
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            // 绘制左侧面
            var CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function(ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    var xAxisPoint = shape.xAxisPoint
                    //console.log(shape)
                    var c0 = [shape.x + 10, shape.y]
                    var c1 = [shape.x - 13, shape.y]
                    var c2 = [xAxisPoint[0] - 13, xAxisPoint[1]]
                    var c3 = [xAxisPoint[0] + 10, xAxisPoint[1]]
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(
                            c3[0], c3[1])
                        .closePath()
                }
            })
            // 绘制右侧面
            var CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function(ctx, shape) {
                    var xAxisPoint = shape.xAxisPoint
                    var c1 = [shape.x + 10, shape.y]
                    var c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
                    var c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 5]
                    var c4 = [shape.x + 18, shape.y - 5]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(
                            c4[0], c4[1])
                        .closePath()
                }
            })
            // 绘制顶面
            var CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0
                },
                buildPath: function(ctx, shape) {
                    var c1 = [shape.x + 10, shape.y]
                    var c2 = [shape.x + 18, shape.y - 5]
                    var c3 = [shape.x + -5, shape.y - 5]
                    var c4 = [shape.x - 13, shape.y]
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(
                            c4[0], c4[1])
                        .closePath()
                }
            })
            // 注册三个面图形
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)

            var VALUE = ['420', '350', '310', '220', '170', '380', '570', '380', '450', '290', '360', '530']
            var VALUE2 = ['90', '70', '80', '80', '65', '55', '57', '65', '95', '80', '50', '35']

            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function formatter(params, ticket, callback) {
                        var item = params[1];
                        var texts = ''
                        var percentage = ''
                        texts = params[0].value
                        percentage = params[2].value
                        return item.name + '<br>申请量：' + texts + '<br>同比增长率： ( ' + percentage + '%' + ' ) ';
                    }
                },
                legend: {
                    right: '70',
                    top: '5',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    selectedMode: false,
                    data: [{
                        icon: 'image://images/legend_bar1.png',
                        name: '申请量',
                    }, {
                        icon: 'image://images/legend_line1.png',
                        name: '同比增长率'
                    }]
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '3%',
                    top: '50',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#009e98'
                        }
                    },
                    axisTick: {
                        show: false,
                        length: 9,
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#009e98'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 15
                        },
                        formatter: function(params) {
                            var newParamsName = ''
                            var paramsNameNumber = params.length
                            var provideNumber = 7 // 一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = ''
                                    var start = p * provideNumber
                                    var end = start + provideNumber
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber)
                                    } else {
                                        tempStr = params.substring(start, end) + '\n'
                                    }
                                    newParamsName += tempStr
                                }
                            } else {
                                newParamsName = params
                            }
                            return newParamsName
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    min: 0,
                    max: 1000,
                    interval: 200,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0169bb'
                        }
                    },
                    //分格线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#013f7c'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }, // 保留网格区域
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 15
                        },
                    },
                    boundaryGap: ['20%', '20%']
                }, {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0169bb'
                        }
                    },
                    //分格线
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                            color: '#016062'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    }, // 保留网格区域
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 15
                        },
                        formatter: '{value}%'
                    },
                    boundaryGap: ['20%', '20%']
                }],
                series: [{
                    type: 'custom',
                    name: '申请量',
                    renderItem: function renderItem(params, api) {
                        var location = api.coord([api.value(0), api.value(1)]);
                        return {
                            type: 'group',
                            children: [{
                                type: 'CubeLeft',
                                shape: {
                                    api: api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0,
                                        0, 1, [{
                                            offset: 0,
                                            color: '#00adf5'
                                        }, {
                                            offset: 1,
                                            color: '#8d73ff'
                                        }])
                                }
                            }, {
                                type: 'CubeRight',
                                shape: {
                                    api: api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0,
                                        0, 1, [{
                                            offset: 0,
                                            color: '#7fddff'
                                        }, {
                                            offset: 1,
                                            color: '#1e54e8'
                                        }])
                                }
                            }, {
                                type: 'CubeTop',
                                shape: {
                                    api: api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0])
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0,
                                        0, 1, [{
                                            offset: 0,
                                            color: '#8adaff'
                                        }, {
                                            offset: 1,
                                            color: '#0cbaec'
                                        }])
                                }
                            }]
                        };
                    },
                    data: VALUE
                }, {
                    type: 'bar',
                    label: {
                        normal: {
                            show: false,
                            position: 'top',
                            fontSize: 12,
                            color: '#fff',
                            offset: [2, -25]
                        }
                    },
                    itemStyle: {
                        color: 'transparent'
                    },
                    tooltip: {},
                    data: VALUE
                }, {
                    type: 'line',
                    name: '同比增长率',
                    yAxisIndex: 1,
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#dbff79'
                            },
                            {
                                offset: 0.5,
                                color: '#73ffdc'
                            },
                            {
                                offset: 1,
                                color: '#dbff79'
                            }
                        ]),
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 228, 0.21)'
                                    },
                                    {
                                        offset: 0.7,
                                        color: 'rgba(0, 240, 255, 0)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 240, 255, 0)'
                                    }
                                ],
                                false
                            ),
                        }
                    },
                    tooltip: {},
                    data: VALUE2
                }]
            };

            this.chart.setOption(option);

            let this_ = this;
            var index = 0 // 播放所在下标
            setInterval(() => {
                this_.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0, // 第几条series
                    dataIndex: index // 第几个tooltip
                })
                index++
                if (index > VALUE.length - 1) {
                    index = 0
                }
            }, 2000)
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
